<template>
  <el-tabs type="border-card" >
    <el-tab-pane label="购买">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="我想买">
          <el-select v-model="formInline.tokenType" placeholder="Token">
            <el-option
                v-for="item in tokenList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="购买个数">
          <el-input type="age" v-model.number="formInline.tokenValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="您预计花费">
          <el-input type="number" v-model.number="formInline.tokenPay" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="挂单期">
          <el-date-picker
              v-model="formInline.tokenLimitTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :editable=false
              :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">购买</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="出售">
      <el-form :inline="true" :model="soldForm" class="demo-form-inline">
        <el-form-item label="我想卖">
          <el-select v-model="soldForm.tokenType" placeholder="Token">
            <el-option
                v-for="item in tokenList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出售个数">
          <el-input type="age" v-model.number="soldForm.tokenValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="您预计可得">
          <el-input type="number" v-model.number="soldForm.tokenPay" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="挂单期">
          <el-date-picker
              v-model="soldForm.tokenLimitTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :editable=false
              :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSold">出售</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: "TokenSwap.vue",
  props:["TokenSwapDate"],
  data(){
    return{
      pickerOptions: {
        shortcuts: [{
          text: '一小时',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000);
            picker.$emit('pick', date);
          }
        }, {
          text: '六小时',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 6);
            picker.$emit('pick', date);
          }
        }, {
          text: '二十四小时',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }]
      },
      data: [ ["2021-12-01", 4.1123],
        ["2021-12-02", 4.3278],
        ["2021-12-03", 4.1225],
        ["2021-12-04", 4.4234],
        ["2021-12-05", 4.9786],
        ["2021-12-06", 4.6723],],
      formInline: {
        tokenType:'',
        tokenValue: '',
        tokenPay:'',
        tokenLimitTime:''
      },
      soldForm:{
        tokenType:'',
        tokenValue: '',
        tokenPay:'',
        tokenLimitTime:''
      },
      tokenList:[],
      tokenPrice:0,
    }
  },
  created() {
    console.log("swap",this.TokenSwapDate)
  },
  mounted() {
    this.loadingTokenPool()
  },
  watch:{
    'formInline.tokenType':function (val){
      this.TokenCenterJS.getExchangeAddressByTokenSymbol(val,exchangeAddress=>{
        this.ExchangeJS.getTokenPriceByExchangeAddress(exchangeAddress,tokenInfoPrice=>{
          this.tokenPrice = tokenInfoPrice
        })
      })
    },
    'formInline.tokenValue':function (val){
      this.formInline.tokenPay = Math.ceil(val*this.tokenPrice+val*this.tokenPrice*0.03)
    },
    'soldForm.tokenType':function (val){
      this.TokenCenterJS.getExchangeAddressByTokenSymbol(val,exchangeAddress=>{
        this.ExchangeJS.getTokenPriceByExchangeAddress(exchangeAddress,tokenInfoPrice=>{
          this.tokenPrice = tokenInfoPrice
        })
      })
    },
    'soldForm.tokenValue':function (val){
      this.soldForm.tokenPay = Math.floor(val*this.tokenPrice-val*this.tokenPrice*0.03)
    },
  },
  methods:{
    onSubmit(){
      this.TokenCenterJS.getExchangeAddressByTokenSymbol(this.formInline.tokenType,exchangeAddress=>{
        this.ExchangeJS.ethTokenSwap(exchangeAddress,this.formInline,status=>{
          if(status === true){

          }
        })
      })
    },
    onSold(){
      this.TokenCenterJS.getExchangeAddressByTokenSymbol(this.soldForm.tokenType,exchangeAddress=>{
        this.ExchangeJS.tokenEthSwap(exchangeAddress,this.soldForm,status=>{
          if(status === true){

          }
        })
      })
    },
    loadingTokenPool(){
      this.TokenCenterJS.getTokenSymbolList(list=>{
        let tokenL=[]
        list.map((i,j)=>{
          tokenL[j]={
            value:i
          }
          j++
        })
        this.tokenList = tokenL
      })
    }
  }
}
</script>

<style scoped>

</style>
